<template>
  <div ref="bar" class="charts chart-bar" id="piemain"></div>
</template>

<script>
import echarts from 'echarts'
import util from '@/utils'
export default {
    name: 'ChartBar',
    data () {
        return {
            myChart: '',
            checkedData: [],
            checkedIndex: []
        }
    },
    props: {
        data: Array
    },
    mounted () {
        this.$nextTick(() => {
            this.init()
        })
    },
    watch: {
        data () {
            this.init()
        }
    },
    methods: {
        init () {
            let _this = this
            this.myChart = echarts.init(document.getElementById('piemain'))
            let option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                series: {
                    name: '实体',
                    type: 'pie',
                    data: _this.data,
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}:{c}'
                        }
                    }
                },
                tooltip: {
                    formatter: '{b} : {c}'
                },
                title: {
                    text: '实体',
                    x: 'center'
                }
            }
            this.myChart.setOption(option)
            this.myChart.off('click')
            for (let i of this.checkedIndex) {
                this.myChart.dispatchAction({ type: 'highlight', dataIndex: i })
            }
            this.myChart.on('click', function (params) {
                // 验证是否是高亮状态
                let isChecked = _this.verifyIsChecked(params.data)
                if (isChecked) {
                    for (let i = 0; i < _this.checkedData.length; i++) {
                        if (_this.checkedData[i].uri === params.data.uri) {
                            _this.myChart.dispatchAction({
                                type: 'downplay',
                                dataIndex: params.dataIndex
                            })
                            _this.checkedData.splice(i, 1)
                            _this.checkedIndex.splice(i, 1)
                            break
                        }
                    }
                } else {
                    _this.checkedData.push(params.data)
                    _this.checkedIndex.push(params.dataIndex)
                    _this.myChart.dispatchAction({
                        type: 'highlight',
                        dataIndex: params.dataIndex
                    })
                }
                _this.$emit('pieClick', _this.getUriList(_this.checkedData))
            })
            this.myChart.on('mouseover', function (params) {
                let isChecked = _this.verifyIsChecked(params.data)
                if (isChecked) {
                    for (let i = 0; i < _this.checkedData.length; i++) {
                        if (_this.checkedData[i].uri === params.data.uri) {
                            _this.myChart.dispatchAction({
                                type: 'highlight',
                                dataIndex: params.dataIndex
                            })
                            break
                        }
                    }
                } else {
                    _this.myChart.dispatchAction({
                        type: 'downplay',
                        dataIndex: params.dataIndex
                    })
                }
            })
            this.myChart.on('mouseout', function (params) {
                let isChecked = _this.verifyIsChecked(params.data)
                if (isChecked) {
                    for (let i = 0; i < _this.checkedData.length; i++) {
                        if (_this.checkedData[i].uri === params.data.uri) {
                            _this.myChart.dispatchAction({
                                type: 'highlight',
                                dataIndex: params.dataIndex
                            })
                            break
                        }
                    }
                } else {
                    _this.myChart.dispatchAction({
                        type: 'downplay',
                        dataIndex: params.dataIndex
                    })
                }
            })
        },
        resize () {
            this.$nextTick(() => {
                this.myChart.resize()
                this.init()
            })
        },
        clearData () {
            this.checkedIndex = []
            this.checkedData = []
            this.init()
        },
        verifyIsChecked (data) {
            let flag = false
            for (let item of this.checkedData) {
                if (item.uri === data.uri) {
                    flag = true
                    break
                }
            }
            return flag
        },
        getUriList (data) {
            let a = []
            for (let item of data) {
                a.push(item.uri)
            }
            return a
        }
    }
}
</script>

<style lang="less" scoped>
.chart-bar {
  width: 100%;
  height: 300px;
}
</style>
